<script setup>
import { ref } from 'vue'

const learningStats = {
  totalKnowledge: 45,
  completedPoints: 28,
  totalTime: '126h',
  avgScore: 85
}

const weeklyActivity = {
  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  data: [2.5, 3, 1.5, 4, 2, 5, 3.5] // 小时
}

const knowledgeDistribution = [
  { type: 'tech', count: 20, percentage: 45, name: '技术' },
  { type: 'science', count: 12, percentage: 25, name: '理论' },
  { type: 'art', count: 8, percentage: 18, name: '艺术' },
  { type: 'life', count: 5, percentage: 12, name: '生活' }
]

const recentAchievements = [
  {
    id: 1,
    title: '知识探索者',
    description: '完成30个知识点的学习',
    date: '2024-03-20',
    icon: '🏆'
  },
  {
    id: 2,
    title: '学习达人',
    description: '连续学习7天',
    date: '2024-03-19',
    icon: '🌟'
  },
  {
    id: 3,
    title: '技能大师',
    description: '技术类知识点达到20个',
    date: '2024-03-18',
    icon: '💫'
  }
]

const learningTips = [
  {
    title: '知识盲点',
    content: '建议加强理论知识的学习，当前进度较低',
    type: 'warning'
  },
  {
    title: '学习建议',
    content: '可以尝试将技术知识点与实践项目结合',
    type: 'info'
  },
  {
    title: '近期表现',
    content: '本周学习时长较上周提升20%，继续保持',
    type: 'success'
  }
]

const focusAreas = [
  { name: 'Vue.js', progress: 85, priority: 'high' },
  { name: '设计模式', progress: 65, priority: 'medium' },
  { name: '项目管理', progress: 75, priority: 'medium' },
  { name: 'UI设计', progress: 60, priority: 'low' }
]
</script>

<template>
  <div class="learning-insights">
    <!-- 顶部统计卡片 -->
    <div class="stats-grid">
      <div class="knowledge-card stat-card">
        <div class="stat-icon">📚</div>
        <div class="stat-info">
          <div class="stat-value">{{ learningStats.totalKnowledge }}</div>
          <div class="stat-label">知识点总数</div>
        </div>
      </div>
      <div class="knowledge-card stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-info">
          <div class="stat-value">{{ learningStats.completedPoints }}</div>
          <div class="stat-label">已掌握知识点</div>
        </div>
      </div>
      <div class="knowledge-card stat-card">
        <div class="stat-icon">⏱️</div>
        <div class="stat-info">
          <div class="stat-value">{{ learningStats.totalTime }}</div>
          <div class="stat-label">总学习时长</div>
        </div>
      </div>
      <div class="knowledge-card stat-card">
        <div class="stat-icon">📈</div>
        <div class="stat-info">
          <div class="stat-value">{{ learningStats.avgScore }}</div>
          <div class="stat-label">平均掌握度</div>
        </div>
      </div>
    </div>

    <!-- 主要分析区域 -->
    <div class="analysis-grid">
      <!-- 周活动图表 -->
      <div class="knowledge-card activity-chart">
        <h3>周学习活跃度</h3>
        <div class="chart-container">
          <div class="chart-bars">
            <div 
              v-for="(hours, index) in weeklyActivity.data"
              :key="index"
              class="chart-bar-wrapper"
            >
              <div 
                class="chart-bar"
                :style="{ height: (hours / 5 * 100) + '%' }"
              >
                <span class="bar-value">{{ hours }}h</span>
              </div>
              <span class="bar-label">{{ weeklyActivity.labels[index] }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 知识分布 -->
      <div class="knowledge-card distribution-chart">
        <h3>知识类型分布</h3>
        <div class="distribution-list">
          <div 
            v-for="item in knowledgeDistribution"
            :key="item.type"
            class="distribution-item"
          >
            <div class="item-header">
              <span class="item-name">{{ item.name }}</span>
              <span class="item-count">{{ item.count }}个</span>
            </div>
            <div class="progress-bar">
              <div 
                class="progress-fill"
                :style="{ 
                  width: item.percentage + '%',
                  background: `var(--knowledge-${item.type})`
                }"
              ></div>
            </div>
            <span class="percentage">{{ item.percentage }}%</span>
          </div>
        </div>
      </div>

      <!-- 成就展示 -->
      <div class="knowledge-card achievements-section">
        <h3>最近成就</h3>
        <div class="achievements-grid">
          <div 
            v-for="achievement in recentAchievements"
            :key="achievement.id"
            class="achievement-card"
          >
            <div class="achievement-icon">{{ achievement.icon }}</div>
            <div class="achievement-info">
              <h4>{{ achievement.title }}</h4>
              <p>{{ achievement.description }}</p>
              <span class="achievement-date">{{ achievement.date }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 学习建议 -->
      <div class="knowledge-card tips-section">
        <h3>学习建议</h3>
        <div class="tips-list">
          <div 
            v-for="(tip, index) in learningTips"
            :key="index"
            :class="['tip-card', tip.type]"
          >
            <h4>{{ tip.title }}</h4>
            <p>{{ tip.content }}</p>
          </div>
        </div>
      </div>

      <!-- 重点关注区域 -->
      <div class="knowledge-card focus-section">
        <h3>重点关注</h3>
        <div class="focus-list">
          <div 
            v-for="area in focusAreas"
            :key="area.name"
            class="focus-item"
          >
            <div class="focus-header">
              <span class="focus-name">{{ area.name }}</span>
              <span 
                :class="['priority-badge', area.priority]"
              >
                {{ area.priority }}
              </span>
            </div>
            <div class="focus-progress">
              <div 
                class="progress-bar"
                :style="{ width: area.progress + '%' }"
              ></div>
              <span class="progress-value">{{ area.progress }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.learning-insights {
  width: 100%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
}

.stat-icon {
  font-size: 2.5rem;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--primary-color);
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

/* 活动图表样式 */
.activity-chart {
  grid-column: span 2;
}

.chart-container {
  width: 100%;
  height: 300px;
  position: relative;
  margin-top: 1.5rem;
  padding: 1rem;
}

.chart-bars {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem 0;
}

.chart-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.chart-bar {
  width: 40px;
  background: var(--primary-color);
  border-radius: 20px;
  position: relative;
  transition: height 0.3s ease;
}

.bar-value {
  position: absolute;
  top: -25px;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.bar-label {
  margin-top: 0.5rem;
  color: var(--text-secondary);
}

/* 分布图表样式 */
.distribution-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.distribution-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-bar {
  height: 8px;
  background: var(--background-dark);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.percentage {
  align-self: flex-end;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 成就样式 */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-top: 1.5rem;
}

.achievement-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--background-dark);
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.achievement-card:hover {
  transform: translateY(-2px);
}

.achievement-icon {
  font-size: 2rem;
}

.achievement-info h4 {
  margin-bottom: 0.5rem;
}

.achievement-date {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 建议样式 */
.tips-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.tip-card {
  padding: 1rem;
  border-radius: 12px;
  border-left: 4px solid;
}

.tip-card.warning {
  background: #fff7ed;
  border-left-color: #f59e0b;
}

.tip-card.info {
  background: #eff6ff;
  border-left-color: #3b82f6;
}

.tip-card.success {
  background: #f0fdf4;
  border-left-color: #10b981;
}

/* 重点关注样式 */
.focus-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.focus-item {
  padding: 1rem;
  background: var(--background-dark);
  border-radius: 12px;
}

.focus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.priority-badge {
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.priority-badge.high {
  background: #fee2e2;
  color: #ef4444;
}

.priority-badge.medium {
  background: #fef3c7;
  color: #f59e0b;
}

.priority-badge.low {
  background: #ecfdf5;
  color: #10b981;
}

.focus-progress {
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.focus-progress .progress-bar {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.progress-value {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

h3 {
  color: var(--text-primary);
  font-size: 1.2rem;
}

h4 {
  color: var(--text-primary);
  margin: 0;
}

p {
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0.5rem 0;
}
</style> 